<template>
  <div>
    <div class="app-container">
      <el-form ref="postForm" :model="postForm" :label-position="'right'" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="6">
            <el-form-item label="用户名:">
              <el-input v-model="postForm.username" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" size="small" @click="query()">查询</el-button>
              <el-button type="warning" size="small" @click="addInfo()">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          prop="username"
          header-align="center"
          align="center"
          label="用户名"
        />
        <el-table-column
          prop="email"
          header-align="center"
          align="center"
          label="邮箱"
        />
        <el-table-column
          prop="mobile"
          header-align="center"
          align="center"
          label="手机号"
        />
        <el-table-column
          prop="state"
          header-align="center"
          align="center"
          label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === 0" size="small" type="danger">禁用</el-tag>
            <el-tag v-else size="small">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="button"
              class="el-button el-button--primary el-button--mini"
              @click="editInfo(scope.$index,scope.row)"
            >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form ref="info" :rules="rules" :model="info" label-position="left" label-width="200px">
        <el-form-item label="登录名:" prop="username">
          <el-input v-model="info.username" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="info.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号:" prop="mobile">
          <el-input v-model="info.mobile" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="info.password" placeholder="请输入密码（重新输入为修改）" />
        </el-form-item>
        <el-form-item label="状态:" prop="state">
          <el-radio-group v-model="info.state" style="padding: 10px;">
            <el-radio :label="1">
              有效
            </el-radio>
            <el-radio :label="0">
              禁用
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { addOrEdit, getInfo, page } from '@/api/system/sysUser.js'

  export default {
    data() {
      return {
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 15,
        // 页码
        currentPage: 1,
        postForm: {},
        info: {},
        name: null,
        editIndex: 0,
        centerDialogVisible: false,
        title: '新增',
        rules: {
          username: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          state: [{ required: true, message: '请输入状态', trigger: 'blur' }],
          email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
          mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 新增
      addInfo() {
        this.title = '新增'
        this.info = {}
        // this.$refs.tree.setCheckedKeys([])
        this.centerDialogVisible = true
      },
      /**
       * 编辑
       * @param row
       */
      editInfo(index, row) {
        this.editIndex = index
        this.title = '编辑'
        this.centerDialogVisible = true
        getInfo(row.id).then(response => {
          this.info = response.data
          this.$refs.tree.setCheckedKeys(JSON.parse(this.info.privilege))
        })
      },
      // 查询条件
      query() {
        this.name = this.postForm.username
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.name).then(response => {
          this.total = response.count
          this.tableData = response.data
        })
      },
      addOrEdit: function() {
        this.$refs['info'].validate((valid) => {
          if (valid) {
            if (this.info.id == null && this.info.password === '') {
              this.$notify({
                title: '错误',
                message: '密码不能为空！',
                type: 'warning',
                duration: 2000
              })
            }
            addOrEdit(this.info.id, this.info.username, 1, this.info.email, this.info.mobile, this.info.state, this.info.password).then(response => {
              this.centerDialogVisible = false
              if (this.info.id == null) {
                // 新增
                this.tableData.unshift(response.data)
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                // 编辑
                this.tableData.splice(this.editIndex, 1, response.data)
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              }
            })
          }
        })
      }
    }
  }
</script>

